<template>
  <div class="login">
    <div id="login_box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="verification" v-if="!loginstate">
          <el-input
            v-model="ruleForm.verification"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="loginstate" @click="login"
            >登录</el-button
          >
          <el-button type="primary" v-else @click="login">注册</el-button>
          <el-button @click="loginstate = !loginstate">切换{{ loginstate?'注册':'登录' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reguser } from "@/api/login";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.verification !== "") {
          this.$refs.ruleForm.validateField("verification");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //当前的状态，true为登录
      loginstate: true,
      ruleForm: {
        username: "",
        password: "",
        verification: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        verification: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login() {
      //用来判断是登录还是注册
      const { loginstate } = this;
      const { username, password } = this.ruleForm;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //验证成功
          if (loginstate) {
            //登录
          } else {
            //注册
            const data = {
              username,
              password,
            };
            reguser(data).then((res) => {
              const {code,data}=res.data
              if(code===200){
                this.loginstate=true
                this.$message.success('用户注册成功，请登录。');
              }else{
                this.$message.error(data);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg")
    no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#login_box {
  width: 20vw;
  background-color: #00000060;
  margin: auto;
  margin-top: 15%;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}
</style>